<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    :title="'查看活动打卡点'">
    <Row class="mt30">
      <Col span="16" offset="4">
        <Form ref="form" :model="form.data" :label-width="150">
          <FormItem prop="pkActGroup" label="组别">
            {{form.data.groupName}}
          </FormItem>
          <FormItem prop="puncloName" label="打卡点名称">
            {{form.data.puncloName}}
          </FormItem>
          <FormItem prop="puncloType" label="打卡点类别">
            {{form.data.puncloTypeName}}
          </FormItem>
          <FormItem prop="puncloNo" label="打卡点序号">
            {{form.data.puncloNo}}
          </FormItem>
          <FormItem label="打卡时间">
            <Row>
              <Col span="24">
                {{form.data.openTime | formatDate('YYYY-MM-DD HH:mm:ss')}} - {{form.data.closeTime | formatDate('YYYY-MM-DD HH:mm:ss')}}
              </Col>
            </Row>
          </FormItem>
          <FormItem prop="chargePerson" label="打卡点负责人">
            {{form.data.chargePerson}}
          </FormItem>
          <FormItem prop="phone" label="负责人联系电话">
            {{form.data.phone}}
          </FormItem>
          <FormItem prop="workers" label="打卡点工作人员">
            {{form.data.workers}}
          </FormItem>
          <FormItem prop="phones" label="工作人员联系电话">
            {{form.data.phones}}
          </FormItem>
          <FormItem prop="address" label="打卡点地址">
            {{form.data.address}}
          </FormItem>
          <FormItem prop="ordinates" label="打卡点坐标">
            {{form.data.ordinates}}
          </FormItem>
          <FormItem prop="puncloKm" label="打卡点公里数">
            {{form.data.puncloKm}}
          </FormItem>
          <FormItem prop="nextPuncloKm" label="下一个打卡点公里数">
            {{form.data.nextPuncloKm}}
          </FormItem>
          <FormItem prop="puncloPhoto" label="图片描述">
            <view-img v-if="form.visible" :defaultImageList="defaultImageList"></view-img>
          </FormItem>
          <FormItem prop="puncloMaterial" label="打卡点物资">
            {{form.data.puncloMaterial}}
          </FormItem>
        </Form>
      </Col>
    </Row>
  </Modal>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import viewImg from '@/components/view-img'
  import activityApi from '@/api/activity'

  export default {
    name: 'update-modal',
    props: [
      'form'
    ],
    components: {
      viewImg
    },
    data () {
      return {
        loading: true,
        actGroupLoading: false,
        actGroupList: []
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        actPuncloTypeList: 'actPuncloTypeList',
        actSortCodeList: 'actSortCodeList'
      })
    },
    watch: {
      'form.visible': 'onClose'
    },
    methods: {
      async getActGroup () {
        this.actGroupLoading = true
        const { body } = await activityApi.group.list({
          pk_act_base_info: this.$route.params.activityId,
          currentPage: 1,
          limit: 10
        })
        const { responseData } = body
        this.actGroupList = responseData.content
        this.actGroupLoading = false
      },
      onClose (isVisible) {
        if (isVisible) {
          this.getActGroup()
          this.defaultImageList = Vue.filter('splitImg')(this.form.data.puncloPhoto || '')
        }
      }
    },
    mounted () {
      this.$store.dispatch('getCode', 'act_sort')
      this.$store.dispatch('getCode', 'punclo_type')
      this.getActGroup()
    }
  }
</script>
